<template>
  <div class="produce-detail">
    <NavBar title="商品详细页"></NavBar>

    <div class="main">
      <van-swipe
        class="my-swipe img"
        :autoplay="3000"
        indicator-color="skyblue"
      >
        <van-swipe-item v-for="(item, index) in imagesList" :key="index">
          <img :src="item.src" alt="" />
        </van-swipe-item>
      </van-swipe>

      <div class="info">
        <div class="title">
          {{ produceInfo.title }}
        </div>
        <div class="price">
          <div class="origin">
            市场价：<span>￥{{ produceInfo.market_price }}</span>
          </div>
          <div class="special">
            销售价：<span style="color:red;fontSize:20px"
              >￥{{ produceInfo.sell_price }}</span
            >
          </div>
        </div>
        <div class="count">
          购买数量：
          <van-stepper
            v-model="value"
            theme="round"
            button-size="22"
            disable-input
          />
        </div>
        <div class="button">
          <van-button color="#26A2FF" type="info">立即购买</van-button>
          <van-button color="#EF4F4F" type="danger" @click="addId"
            >加入购物车</van-button
          >
        </div>
      </div>

      <!-- 参数 -->
      <div class="argument">
        <div class="argument-title">
          商品参数
        </div>
        <div class="argument-info">
          <span>商品货号：{{ produceInfo.goods_no }}</span>
          <span>库存情况：{{ produceInfo.stock_quantity }}</span>
          <span>上架时间：{{ produceInfo.add_time }}</span>
        </div>
      </div>

      <div class="others">
        <van-button
          plain
          color="#26A2FF"
          type="primary"
          @click="$router.push(`/home/introduction/${$route.params.id}`)"
          >图文介绍</van-button
        >
        <van-button
          plain
          color="#EF4F4F"
          type="info"
          @click="$router.push(`/home/produceComment/${$route.params.id}`)"
          >商品评论</van-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from "@/components/NavBar.vue";
import Title from "@/components/Title.vue";
import { getInfoById } from "@/apis/produce";
import { getThumImages } from "@/apis/article";
import {
  getCarItemId,
  getItemId,
  setCarItemId,
  setItemId,
} from "@/utils/localData.js";
import { getShopCarList } from "@/apis/shopcar";
export default {
  components: {
    NavBar,
    Title,
  },
  data() {
    return {
      value: 1,
      produceInfo: {},
      imagesList: [],
      id: this.$route.params.id,
      carIds: [],
      oldCar: getItemId(),
      localCar: getCarItemId(),
    };
  },
  async created() {
    this.produceInfo = (
      await getInfoById(this.$route.params.id)
    ).data.message[0];
    this.produceInfo.add_time = this.produceInfo.add_time.split("T")[0];
    console.log("this.produceInfo", this.produceInfo);

    this.imagesList = (await getThumImages(this.$route.params.id)).data.message;
    console.log("this.imagesList", this.imagesList);
  },
  methods: {
    async addId() {
      if (!this.oldCar) {
        this.oldCar = [];
        this.localCar = [];
        this.oldCar.push(this.id);

        setItemId(this.oldCar);
        this.$emit("ids", getItemId());

        let addShop = await getShopCarList(this.id);
        // console.log(res);
        addShop = addShop.data.message.map((item) => {
          return {
            ...item,
            cou: this.value,
            checked: true,
          };
        });

        this.localCar.push(addShop[0]);

        setCarItemId(this.localCar);
        // // console.log("this.localCar", this.localCar);
        this.$emit("countNum", 1);
      }

      if (this.oldCar.indexOf(this.id) === -1) {
        // console.log(this.oldCar);
        this.oldCar.push(this.id);
        setItemId(this.oldCar);
        this.$emit("ids", getItemId());
        let addShop = await getShopCarList(this.id);
        // console.log(res);
        addShop = addShop.data.message.map((item) => {
          return {
            ...item,
            cou: this.value,
            checked: true,
          };
        });

        console.log("addShop", addShop);

        this.localCar.push(addShop[0]);
        setCarItemId(this.localCar);
        console.log("this.localCar", this.localCar);
        // console.log(getItemId().length);
        this.$emit("countNum", getItemId().length);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.others {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10px 0;
  > .van-button {
    width: 90%;
    margin: 12px 0;
  }
}
.argument-info {
  display: flex;
  flex-direction: column;
  color: #53575e;
  font-size: 14px;
  padding: 10px;
  > span {
    margin: 2px 0 2px 55px;
  }
}
.argument-title {
  color: #53575e;
  font-size: 14px;
  padding: 10px 0 10px 20px;
  border-bottom: 1px solid #e3e3e5;
}
.argument {
  padding: 0 10px;
}
.button {
  padding-left: 15px;
  margin: 10px 0 10px;
  > .van-button {
    margin-left: 5px;
    border-radius: 10px;
  }
}
.origin {
  padding-top: 6px;
  margin: 0 30px 0 20px;
  > span {
    text-decoration: line-through;
  }
}
.count {
  margin-left: 20px;
  .van-stepper {
    margin-left: 30px;
  }
}
.price,
.count {
  display: flex;
  align-items: center;
  color: #53575e;
  font-size: 14px;
  padding: 10px 0;
}
.title {
  border-bottom: 1px solid #e3e3e5;
  color: #0088d1;
  font-weight: bold;
  font-size: 20px;
}
.info {
  padding: 10px;
  margin: 10px 0;
}
.main {
  padding: 5px;
}
img {
  width: 100%;
  height: initial;
}
.img,
.info,
.argument,
.others {
  box-shadow: 0px 0px 0.5vw 0px black;
  border-radius: 5px;
  font-weight: bold;
}
</style>
